<template>
    <div>
        <el-card  class="box-card">

            <div v-show="action&&actions">
                <!-- 征稿头部<新增 删除 标题 分类 查询 重置> -->
                <div class="ContributionsHead">
                    <!-- 新增 删除 -->
                    <div>
                        <el-button type="primary" @click="action = !action; ">新增</el-button>
                        <el-button @click="deldata" >删除</el-button>
                    </div>
                    <!--标题 分类  -->
                    <div class="ContributionsHeadCentre">
                        <div>
                            <el-input v-model="queryParams.keyword"   placeholder="请输入标题" />
                        </div>
                        <div>
                            <el-cascader
                            v-model="queryParams.cate_id"
                            :options="fenledata"
                            :props="cascadeDate" 
                            @change="handleChange"
                          />
                        </div>
                    </div>
                    <!-- 查询 重置 -->
                    <div>
                        <el-button type="primary" :icon="Search" @click="getSCData">查询</el-button>
                        <el-button  :icon="RefreshLeft" @click="resetParameter">重置</el-button>
                    </div>
                </div>
                <div>
                    <!-- 表格 -->
                    <el-table  ref="multipleTableRef" :data="tableData" stripe  style="width: 100%"
                    @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" header-align="left " align="left "
                      
                        />
                        <el-table-column label="封面图" header-align="left " align="left ">
                            <template #default="scope" >
                                <!-- 图片展示 点击图片放大 -->
                                <el-image :z-index="990000" style="width: 5rem; height: 3rem;border-radius:0.5rem ;"
                                class="image" :src="scope.row.draftCover" :zoom-rate="1.2" :preview-src-list="[scope.row.draftCover]"
                                :initial-index="0" fit="cover" alt="" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="draftTitle" label="标题"   width="180" />
                        <el-table-column prop="draftSubClass_id" label="所属分类"  width="140" />
                        <el-table-column prop="draftCity" label="所在城市"  />
                        <el-table-column prop="draftCoverTime" label="征稿时间" />
                        <el-table-column prop="draftUpdateTime" label="更新时间" />
                        <el-table-column label="操作"   show-overflow-tooltip >
                        <template #default="scope">
                                <el-text class="mx-1" type="primary" @click="bianji(scope.row)" >编辑</el-text>
                                <el-text class="mx-1" @click="imageAction(scope.row.draftCover)" style="margin: 0 45px;" type="success">预览</el-text>

                                <el-popconfirm
                                confirm-button-text="删除"
                                cancel-button-text="取消"
                                :icon="InfoFilled"
                                icon-color="#626AEF"
                                title="确认删除?"
                                @confirm="confirmEvent(scope.row.id)"
                                @cancel="cancelEvent"
                              >
                                <template #reference>
                                    <el-text class="mx-1" type="danger">删除</el-text>
                                </template>
                              </el-popconfirm>
                        </template>
                        </el-table-column>
                    </el-table>



                    <!-- 图片展示 -->

                    <el-dialog
                        v-model="centerDialogVisible"
                        title="图片"
                        width="50%"
                        align-center
                    >
                        <div class="imageShow"><img :src="imageUrl" alt="" > </div>
                        <template #footer>
                        <span class="dialog-footer">
                            
                            <el-button type="primary" @click="centerDialogVisible = false">
                            关闭
                            </el-button>
                        </span>
                        </template>
                    </el-dialog>
                    <!-- 分页 -->
                    <div class="pagination-box">
                        <div class="pagination-div"></div>
                        <el-pagination class="pagination" background layout="prev, pager, next, jumper" 
                            :total="queryParams.totle"
                            :page-size="queryParams.size"
                            v-model:current-page="queryParams.page"
                            @current-change="getSCData"
                        />
                    </div>

                </div>  
            </div>
            <AddForm v-show="!action" @close="(e) => { action = e;getSCData() }" />
            <PutForm v-show="!actions" @close="(e) => { actions = e;getSCData() }" :putDate="putDate" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
// 征稿展示
import {listSolicitContributions,getClassifyData,delSolicitContributions} from "@/api/BackstageCallForPapers/index"
// 添加信息组件
import AddForm from './Add.vue'
// 修改信息组件
import PutForm from './Put.vue'
import { ref,onMounted,reactive } from 'vue'
// 引入 搜索和重置 返回箭头  的图标
import {  Search,RefreshLeft,InfoFilled} from '@element-plus/icons-vue'


// 用户接口
interface User {
  id:number
  date: string
  name: string
  address: string
}
// 多选框选中的数据
let selectDate:Array = ref([])
// 更改用户信息
let putDate = ref({})
//  更改用户信息 并且展示更改页
let bianji = (data:any)=>{
    putDate.value =  data.id
    actions.value = false
}
// 当用户点击选框时触发
const handleSelectionChange = (val: User[]) => {
    let arrays: number[] = []
    val.forEach((item,index)=>{
        arrays.push(item.id) 
    })
    selectDate.value = arrays  
}
// 删除多个用户
const deldata = async ()=>{
    let arr = selectDate.value
    arr.forEach((item: any,index: any)=>{
         confirmEvent(item)
    })
}
// 单个删除 
const confirmEvent = async (id: any) => {
    await delSolicitContributions({id:id})
    getSCData()
  console.log('confirm!')
}
const cancelEvent = () => {
  console.log('cancel!')
}
let centerDialogVisible = ref(false)

// 标题的初始化状态
const cascadeDate = {value:"id",label:"name"} 


// 初始页面数据
let queryParams = reactive({
    page:1,
    size:10,
    keyword:'',
    cate_id:'',
    totle:0,
})




// 搜索分类的数据
let fenledata = ref([])



// 添加页的状态
let action = ref(true);
// 修改页的状态
let actions = ref(true);
// 展示图片的地址
let imageUrl = ref("")
// 点击预览触发
let imageAction=  (data: string)=>{
    imageUrl.value = data
    centerDialogVisible.value = true
}

// 列表展示数据
let tableData=ref([])


onMounted( ()=>{
    getSCData()
})

// 获取分类的id
const handleChange = (value: string | any[]) => {
    queryParams.cate_id = value[value.length-1]
}

// 获取 列表信息
let getSCData = async()=>{
    let querydata = {
        page : queryParams.page,
        size: queryParams.size,
        keyword :queryParams.keyword,
        cate_id :queryParams.cate_id
    } 
    let res = await listSolicitContributions(querydata);
    tableData.value =  res.data
    queryParams.totle = res.totle
    fenledata.value = (await getClassifyData()).data    
}

// 搜索
let resetParameter = ()=>{
    queryParams.keyword = '';
    queryParams.cate_id = '';
    getSCData();
}
</script>

<style lang="scss"  scoped>
// 
.ContributionsHead{
    display: flex;  
    margin-bottom: 10px;
    .ContributionsHeadCentre{
        display: inline-flex;
        flex :1;
        justify-content: flex-end;
        .ContributionsHeadCentreSelect{
            display: inline-block;
            margin: 0 35px 0 10px;
        }
    }
}
.pagination-box{
    margin-top: 20px;
    display: flex;
    .pagination-div{
        flex: 1;
    }
}
</style>
<style>
.el-table .el-table__cell {
    z-index: auto !important;
}
.imageShow{
    display: flex;
    overflow: hidden;
    justify-content: space-around;
}
</style>